<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<!--    <script src="../js/lxb_js.js"></script>-->
<!--    <link rel="stylesheet" href="../css/lxb-css.css">-->
    <link rel="stylesheet" href="../static/css/second.css" />
    <style>
        table {
            width: 100%;
            /* border-collapse: collapse; */
            margin: 10px auto;
            margin-top: 20px;
            border: 1px solid #888;
            text-align: center;
            border: 0px;
        }

        th,
        td {
            border: 1px solid #888;
            padding: 5px 0px;
        }

        th {
            background-color: ivory;
        }

        tr:hover {
            cursor: default;
            background-color: seagreen;
        }

        a:hover {
            cursor: pointer;
        }

        .lxb-div {
            width: 100%;
            margin: 10px auto;
        }
        .lxb-select,.lxb-date{
            width: auto;
            height: 40px;
        }
        .addBtn{
            color: white;
            width: 100px;
            height: 40px;
            background-color: blue;
        }
        .outBtn{
            height: 40px;
            width: 50px;
            background-color: white;
            color: blue;
        }
        .seaInput{
            height: 40px;

        }
        .seaBtn{
            color: white;
            height: 40px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="lxb-div">
        <div>
           
            <h4>待处理服务 </h4>
            <span>服务状态 </span>&nbsp;
            <select class="lxb-select" id="select1"></select>
            &nbsp;<span>签约机构 </span>&nbsp;
            <select class="lxb-select" id="select2"></select>
            &nbsp;<span>医生团队 </span>&nbsp;
            <select class="lxb-select" id="select3"></select>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;    
            <button class="addBtn" id="addBtn" onclick="add()">新增服务</button>&nbsp;&nbsp;&nbsp;&nbsp;
            <button class="outBtn">导出</button>
            <br>
            <br>
            &nbsp;&nbsp;&nbsp;<span>服务包 </span>&nbsp;
            <select class="lxb-select" id="select4"></select>
            &nbsp;<span>预约日期 </span>&nbsp;
            <input type="date" class="lxb-date">- <input type="date" class="lxb-date">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    
            <input type="text" placeholder="请输入内容" class="seaInput">
            <button class="seaBtn">搜索</button>
        </div>
        <table>
            <thead>
                <tr>
                    <th><input type="checkbox"></th>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>身份证号</th>
                    <th>手机号码</th>
                    <th>服务状态</th>
                    <th>服务包</th>
                    <th>服务项目</th>
                    <th>申请时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</body>
<script !src="">
    //动态生成表格
    //data是模拟的后台传来的数据
    var data = [{
        "checkbox": '<input type="checkbox">',
        "id": "1",
        "name": "张三",
        "cardId": "154546456546546",
        "phone": "1564654554",
        "status": "待审核",
        "package": "老年人服务包",
        "item": "高血压随访",
        "date": "2022-09-20"
    },
        {
            "checkbox": '<input type="checkbox">',
            "id": "2",
            "name": "张三",
            "cardId": "154546456546546",
            "phone": "1564654554",
            "status": "待审核",
            "package": "老年人服务包",
            "item": "高血压随访",
            "date": "2022-09-20"
        },
        {
            "checkbox": '<input type="checkbox">',
            "id": "3",
            "name": "张三",
            "cardId": "154546456546546",
            "phone": "1564654554",
            "status": "待审核",
            "package": "老年人服务包",
            "item": "高血压随访",
            "date": "2022-09-20"
        },
        {
            "checkbox": '<input type="checkbox">',
            "id": "4",
            "name": "张三",
            "cardId": "154546456546546",
            "phone": "1564654554",
            "status": "待审核",
            "package": "老年人服务包",
            "item": "高血压随访",
            "date": "2022-09-20"
        },
        {
            "checkbox": '<input type="checkbox">',
            "id": "5",
            "name": "张三",
            "cardId": "154546456546546",
            "phone": "1564654554",
            "status": "待审核",
            "package": "老年人服务包",
            "item": "高血压随访",
            "date": "2022-09-20"
        },
        {
            "checkbox": '<input type="checkbox">',
            "id": "6",
            "name": "张三",
            "cardId": "154546456546546",
            "phone": "1564654554",
            "status": "待审核",
            "package": "老年人服务包",
            "item": "高血压随访",
            "date": "2022-09-20"
        },
        {
            "checkbox": '<input type="checkbox">',
            "id": "7",
            "name": "张三",
            "cardId": "154546456546546",
            "phone": "1564654554",
            "status": "待审核",
            "package": "老年人服务包",
            "item": "高血压随访",
            "date": "2022-09-20"
        },
        {
            "checkbox": '<input type="checkbox">',
            "id": "8",
            "name": "张三",
            "cardId": "154546456546546",
            "phone": "1564654554",
            "status": "待审核",
            "package": "老年人服务包",
            "item": "高血压随访",
            "date": "2022-09-20"
        },
        {
            "checkbox": '<input type="checkbox">',
            "id": "9",
            "name": "张三",
            "cardId": "154546456546546",
            "phone": "1564654554",
            "status": "待审核",
            "package": "老年人服务包",
            "item": "高血压随访",
            "date": "2022-09-20"
        },
        {
            "checkbox": '<input type="checkbox">',
            "id": "10",
            "name": "张三",
            "cardId": "154546456546546",
            "phone": "1564654554",
            "status": "待审核",
            "package": "老年人服务包",
            "item": "高血压随访",
            "date": "2022-09-20"
        },
        {
            "checkbox": '<input type="checkbox">',
            "id": "11",
            "name": "张三",
            "cardId": "154546456546546",
            "phone": "1564654554",
            "status": "待审核",
            "package": "老年人服务包",
            "item": "高血压随访",
            "date": "2022-09-20"
        },
        {
            "checkbox": '<input type="checkbox">',
            "id": "12",
            "name": "张三",
            "cardId": "154546456546546",
            "phone": "1564654554",
            "status": "待审核",
            "package": "老年人服务包",
            "item": "高血压随访",
            "date": "2022-09-20"
        },
        {
            "checkbox": '<input type="checkbox">',
            "id": "13",
            "name": "张三",
            "cardId": "154546456546546",
            "phone": "1564654554",
            "status": "待审核",
            "package": "老年人服务包",
            "item": "高血压随访",
            "date": "2022-09-20"
        },
        {
            "checkbox": '<input type="checkbox">',
            "id": "14",
            "name": "张三",
            "cardId": "154546456546546",
            "phone": "1564654554",
            "status": "待审核",
            "package": "老年人服务包",
            "item": "高血压随访",
            "date": "2022-09-20"
        },
        {
            "checkbox": '<input type="checkbox">',
            "id": "15",
            "name": "张三",
            "cardId": "154546456546546",
            "phone": "1564654554",
            "status": "待审核",
            "package": "老年人服务包",
            "item": "高血压随访",
            "date": "2022-09-20"
        },
    ];
    //获取table全部
    var table = document.querySelector("table");
    var tbody = document.querySelector('tbody');
    console.log(tbody);
    //循环输出数据
    for (var i = 0; i < data.length; i++) {
        var tr = document.createElement('tr');
        //创建的tr插入table里
        tbody.appendChild(tr);
        //for in 遍历data数组
        for (var k in data[i]) {
            var td = document.createElement('td');
            //给td加上内容

            td.innerHTML = data[i][k];
            //创建的td插入tr里
            tr.appendChild(td);
        }
        //创建删除的单元格
        var td = document.createElement('td');
        td.innerHTML = '<a style="color:blue;">' + '查看详情 ' + '</a><a style="color:blue;" id="delete">' + ' 删除' + '</a>';
        tr.appendChild(td);
    }



    //实现点击删除两字删除对应的行
    var dele = document.querySelectorAll('#delete');
    for (var i = 0; i < dele.length; i++) {
        dele[i].onclick = function () {
            tbody.removeChild(this.parentNode.parentNode);
        }
    };
    //下拉列表框
    var data1 = ["请选择","待审核","待服务","已驳回"];
    var select1 = document.querySelector("#select1");
    for (var i = 0; i < data1.length; i++) {
        var option = document.createElement('option');
        //给td加上内容

        option.innerHTML = data1[i];
        //创建的td插入tr里
        select1.appendChild(option);
    }
    var data2 = ["请选择","罗西社区服务中心","天明社区服务中心","民进社区服务中心"];
    var select2 = document.querySelector("#select2");
    for (var i = 0; i < data2.length; i++) {
        var option = document.createElement('option');
        //给td加上内容

        option.innerHTML = data2[i];
        //创建的td插入tr里
        select2.appendChild(option);
    }
    var data3 = ["请选择","张三团队","李四团队","王五团队"];
    var select3 = document.querySelector("#select3");
    for (var i = 0; i < data3.length; i++) {
        var option = document.createElement('option');
        //给td加上内容

        option.innerHTML = data3[i];
        //创建的td插入tr里
        select3.appendChild(option);
    }
    var data4 = ["请选择","0-6岁儿童服务包","老年人服务包","慢性病护理包"];
    var select4 = document.querySelector("#select4");
    for (var i = 0; i < data4.length; i++) {
        var option = document.createElement('option');
        //给td加上内容

        option.innerHTML = data4[i];
        //创建的td插入tr里
        select4.appendChild(option);
    }

    function add(){
        window.location.href="addServeInfo.html"
    }
</script>
</html>